<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/add.css"/>

	</head>
	<body>
		<div id="app">
			<div class="header">
				<span>添加用户</span>
			</div>
			<div class="content">

				<table>
					<tr>
						<td class="text-right">用户名</td><td class="content_right"><input id="name" type="text" class="input" required="required"  placeholder="请输入用户名" /></td>
					</tr>
					<tr>
						<td class="text-right">手机号码</td><td class="content_right"><input id="phone" type="text" class="input" required="required" placeholder="手机号码" /></td>
					</tr>
					<tr>
						<td class="text-right">身份证号码</td><td class="content_right"><input id="number" type="text" class="input" required="required" placeholder="身份证号码" /></td>
					</tr>
					<tr>
						<td class="text-right">密码</td><td class="content_right"><input type="text" class="input" required="required" placeholder="密码"/></td>
					</tr>
					<tr>
						<td></td><td class="content_right"><span id="submit" class="btn btn-info">立即提交</span> <span id="reset" class="btn">重置</span> </td>
					</tr>
				</table>

			</div>
		</div>

		<script src="../../assets/layui.all.js"></script>
		<script src="/js/jquery.min.js"></script>
		<script src="/layer/layer.js"></script>
		<script>
			var form = layui.form
					,layer = layui.layer;
		</script>
	<script>


		$(function () {
			var username;
			var userPhone;
			var userNumber;
			$("#name").blur(function () {
				username = $("#name").val();
				$.getJSON("/user/checkName.do",{username:username},function (data) {
					if (data.status == -1) {
						layer.tips(data.result,'#name');
						$("#name").html("");
					}
				});
			});
			$("#phone").blur(function () {
				userPhone = $("#phone").val();
				$.getJSON("/user/checkPhone.do",{userPhone:userPhone},function (data) {
					if (data.status == -1) {
						layer.tips(data.result,'#phone');
						$("#phone").html("");
					}
				});
			});
			$("#number").blur(function () {
				userNumber= $("#number").val();
				$.getJSON("/user/checkNumber.do",{userNumber:userNumber},function (data) {
					if (data.status == -1) {
						layer.tips(data.result,'#number');
						$("#number").html("");
					}
				});
			});
			$("#submit").click(function () {
				var windowId = layer.load();
				username = $("input:eq(0)").val();
				userPhone = $("input:eq(1)").val();
				userNumber = $("input:eq(2)").val();
				var password = $("input:eq(3)").val();

				//验证手机号码格式
				if(!isPhoneNo(userPhone)){
					layer.close(windowId);
					layer.msg("请输入正确的手机号码");
				}else if (!isCardNo(userNumber)){
					layer.close(windowId);
					layer.msg("请输入正确的身份证号码");
				}else if (!CheckStr(username)){
					layer.close(windowId);
					layer.msg("用户名存在非法字符");
				}else if (username == "" || userPhone == "" || userNumber == "" || password == ""){
					layer.close(windowId);
					layer.msg("必填项不能为空");
				}else{
					// alert("来到了这里");
					$.getJSON("/user/insert.do",{
						username:username,
						userPhone:userPhone,
						userNumber:userNumber,
						password:password
					},function (data) {
						layer.close(windowId);
						layer.msg(data.result);
						if (data.status == 0) {
							$("input").val("");
						}
					});
				}
			});

			$("#reset").click(function(){
				$("input").val("");
			});

		});
		//验证手机号码格式
		function isPhoneNo(phone) {
			var pattern = /^1[34578]\d{9}$/;
			return pattern.test(phone);
		}

		// 验证身份证
		function isCardNo(card) {
			var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			return pattern.test(card);
		}

		// 验证没有非法字符
		function CheckStr(name) {
			var pattern = /[,./<>?;':"{}~`!@#$%^&*()_+-=]/;
			return pattern.test(name);
		}
	</script>
	</body>
</html>
